<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<form class="form-horizontal" role="form" id="form">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label" style="padding: 0px">用户名</label>
        <div class="col-sm-10">
            <div id="name" class="cc-Text" nameCn="用户名" style="width:280px;height:30px;"  required="true"  inputStyle="color:red;font-style:bold"   initValue="aaa" data-options="" validRules="'account':true"  remark="由6-10位字母和数字组成"></div>

            <div id="xxx" class="cc-Hidden" initValue="aaa1111" model="1"></div>

        </div>
    </div>
    <div class="form-group">
        <label for="realName" class="col-sm-2 control-label">真实名称</label>
        <div class="col-sm-10">
            <div id="realName" class="cc-Text" nameCn="真实名称"  style="width:280px;height:30px;" initValue="aa"  required="true" validRules="" style="width:250px;height:30px;"   remark="" data-options=""></div>
        </div>
    </div>
    <div class="form-group">
        <label for="age" class="col-sm-2 control-label">年龄</label>
        <div class="col-sm-10">
            <div id="age" class="cc-Number" nameCn="年龄"  style="width:280px;height:30px;"  initValue="18" numberType="2" maxNum="200" required="true" validRules="minEq:6" style="width:250px;height:30px;"   remark="6-200数字" data-options=""></div>
        </div>
    </div>
    <div class="form-group">
        <label for="memo" class="col-sm-2 control-label">备注</label>
        <div class="col-sm-10">
            <div id="memo" class="cc-TextArea" style="width: 280px;height: 80px;" initValue="aa" nameCn="备注"required="true" validRules="" style="width:250px;height:30px;"   remark="备注是对表单的说明" data-options=""></div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">

            <input type="button" value="setValue" onclick="setValue()">
            <input type="button" value="getAddData" onclick="getAddData()">
            <input type="button" value="getEditData" onclick="getEditData()">
            <input type="button" value="reset" onclick="reset1()">
            <input type="button" value="clear" onclick="clear1()">
            <input type="button" value="isValid" onclick="isValid()">
            <input type="button" value="destroy" onclick="destroy()">
        </div>
    </div>
</form>

<script type="text/javascript" src="/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/lib/layer/layer.js"></script>

<script type="text/javascript" src="/lib/handlebars/handlebars-v4.0.5.js"></script>
<script type="text/javascript" src="/lib/handlebars/handlebars-extend.js"></script>

<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="/lib/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript"  src="/lib/common/common.js"></script>

<link type="text/css" href="/lib/component/css/cc.css" rel="stylesheet" />
<script type="text/javascript"  src="/lib/component/js/cc.js"></script>

<script type="text/javascript">
    var model = {
        "name":"zhangsan"
    };

    _$.parser.onComplete = function(){
        logger("---------------")
    };

    _$.validator.addMethod("xxxx",function(params){
        return  _$.validator.zeroHandler(params,function(val){
            if (isNaN(val)) {
                return false;
            }
            val = parseFloat(val);
            if (val > 5) {
                return true;
            }
            return false;
        });
    },"[{0}]自定义校验规则,值大于 5");
    $(function(){
       _$.parser.parse()
    });

    function onfocusHandler(e){
        console.log(e.value);
    }
    function onblurHandler(e){
        console.log(e.value);
    }
    function onInputHandler(e){
        var name = e.name;
        console.log("---------" + name)
        var obj = _$.getById(name);
        obj.isValid();
    }

    function setValue(){
        var form = new _$.Form("#form");
        var values = {"name":"aa","realName":"bb","age":20};

        form.setValue(values)
    }
    function getAddData(){

        var form = new _$.Form("#form");
        var values = form.getAddData();
        alert(JSON.stringify(values))
    }
    function getEditData(){

        var form = new _$.Form("#form");
        var values = form.getEditData();
        alert(JSON.stringify(values))
    }
    function reset1(){

        var form = new _$.Form("#form");
        form.reset();
    }
    function clear1(){

        var form = new _$.Form("#form");
        form.clear();
    }
    function isValid(){

        var form = new _$.Form("#form");
        var flag = form.isValid();
          console.log("==================" + flag)
    }

    function destroy(){
        var name = _$.getById("name");
        name.destroy();
        var realName = _$.getById("realName");
        realName.destroy();
        var memo = _$.getById("memo");
        memo.destroy();
        var age = _$.getById("age");
        age.destroy();
    }

</script>
</body>
</html>
